<template>
    <div>
        <!-- jira版本 -->
        <div v-if="detail.jiraId">
            <a-form layout="inline" :model="form" ref="ruleFormRef" :rules="rules">
                <a-row style="width: 500px">
                    <a-col :span="24">
                        <a-form-item label="期望测试时间" name="testStartTime">
                            <!-- 有排期时间也不可以编辑 -->
                            <span
                                v-if="
                                    !isPM ||
                                    [1, 2, 4].includes(testStatus) ||
                                    (testStatus === 3 && list.length !== 1) ||
                                    (detail.testPlanStartTime && detail.testPlanEndTime)
                                "
                            >
                                <span v-if="form.testStartTime">{{ $filters.dateFilter(form.testStartTime) }}</span>
                                <span v-if="form.testStartTime">~</span>
                                <span v-if="form.testEndTime">{{ $filters.dateFilter(form.testEndTime) }}</span>
                            </span>
                            <div style="width: 100%" v-else>
                                <a-range-picker
                                    :default-value="[
                                        form.testStartTime ? $moment(form.testStartTime, 'YYYY/MM/DD') : null,
                                        form.testEndTime ? $moment(form.testEndTime, 'YYYY/MM/DD') : null,
                                    ]"
                                    @change="rangeDateChange"
                                />
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <div v-else>
            <div style="margin: 0 0 12px 12px">
                <div class="cell-item" v-if="+detail.processStatus >= 3 && +detail.status < 3">
                    <flexbox
                        style="margin: 0 0 12px 0px"
                        v-if="(disabled || [1, 2, 4].includes(testStatus)) && isAutoTest && detail.processStatus && +detail.processStatus < 8"
                    >
                        <CheckCircleFilled style="color: #52c41a" />
                        <span class="margin-l-8 body-font-color">需求测试执行中…</span>
                        <a class="margin-l-8" @click="handleRefresh">刷新</a>
                    </flexbox>
                    <a-radio-group :disabled="disabled || [1, 2, 4].includes(testStatus)" v-model:value="isAutoTest" style="margin-bottom: 8px">
                        <a-radio :value="false"> 产品经理自行测试 </a-radio>
                        <a-radio :value="true"> 提测到测试管理平台</a-radio>
                    </a-radio-group>
                </div>
                <a-divider v-if="(+detail.processStatus <= 7 && +detail.processStatus >= 3) || [1, 2, 4].includes(testStatus)" />
            </div>
            <a-form layout="inline" :model="form" ref="ruleFormRef" :rules="rules">
                <a-row>
                    <a-col :span="16" v-if="isAutoTest">
                        <a-row>
                            <a-col :span="24">
                                <a-form-item label="期望测试时间" name="testStartTime">
                                    <!-- 有排期时间也不可以编辑 -->
                                    <span
                                        v-if="
                                            disabled ||
                                            [1, 2, 4].includes(testStatus) ||
                                            (testStatus === 3 && list.length !== 1) ||
                                            (detail.testPlanStartTime && detail.testPlanEndTime)
                                        "
                                    >
                                        {{ $filters.dateFilter(form.testStartTime) }}~{{ $filters.dateFilter(form.testEndTime) }}
                                    </span>
                                    <div style="width: 100%" v-else>
                                        <a-range-picker
                                            :default-value="[
                                                form.testStartTime ? $moment(form.testStartTime, 'YYYY/MM/DD') : null,
                                                form.testEndTime ? $moment(form.testEndTime, 'YYYY/MM/DD') : null,
                                            ]"
                                            @change="rangeDateChange"
                                        />
                                    </div>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </div>
</template>

<script lang="ts">
import { getOtherPlatformIp } from '@/utils/util';
import { CheckCircleFilled } from '@ant-design/icons-vue';
import store from '@/store';
import { useDownFile } from '@/hooks/common/useFile';
import { defineComponent, ref, unref, reactive, toRefs, computed, watch, getCurrentInstance } from 'vue';
export default defineComponent({
    name: 'RequireDev',
    components: {
        CheckCircleFilled
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        stage: { type: String, default: '' },
        disabled: { type: Boolean, default: false },
        list: {
            type: Array,
            default: () => []
        }
    },
    emits: ['save'],
    setup(props) {
        const instance: any = getCurrentInstance();
        const { downTemplate } = useDownFile();
        const ruleFormRef = ref();
        const state = reactive<any>({
            form: {
                testSystem: '',
                testStartTime: '',
                testEndTime: ''
            },
            testInfo: {}, // 提测信息
            isAutoTest: null
        });

        const rules = computed(() => {
            const rules: any = {
                testSystem: [{ required: true, message: '测试系统不能为空', trigger: 'blur' }],
                testStartTime: [{ required: true, message: '提测时间范围不能为空', trigger: 'blur' }]
            };
            if (props.detail.jiraId) {
                return !unref(isPM) || [1, 2, 4].includes(unref(testStatus)) || (unref(testStatus) === 3 && props.list.length !== 1) ? {} : rules;
            } else {
                return props.disabled || [1, 2, 4].includes(unref(testStatus)) || (unref(testStatus) === 3 && props.list.length !== 1) ? {} : rules;
            }
        });

        const testStatus = computed(() => {
            return +props.detail.pmpTestInformationDTO?.testStatus || 0;
        });

        const isPM = computed(() => {
            return store.getters.userInfo.employeeDTO.isPM;
        });

        const rangeDateChange = (date, dateString) => {
            state.form.testStartTime = dateString[0];
            state.form.testEndTime = dateString[1];
        };
        // 跳转到测试管理平台详情
        const showDetail = () => {
            const ip = getOtherPlatformIp('acmdb');
            const json = JSON.stringify({
                type: 'pmp'
            });
            const url = `${ip}/#/homepage?ssoToken=${store.getters.token}&json=${json}`;
            window.open(url, '_blank');
        };
        const handleRefresh = () => {
            instance.proxy.$mitt.emit('refreshTestStatus', true);
        };
        // 监听提测信息
        watch(
            () => props.detail.pmpTestInformationDTO,
            (n) => {
                if (n) {
                    state.isAutoTest = true;
                    const { testSystem, testStartTime, testEndTime } = n;
                    state.testInfo = {
                        ...n
                    };
                    state.form = {
                        ...state.form,
                        testSystem,
                        testStartTime,
                        testEndTime
                    };
                } else {
                    state.isAutoTest = props.detail.autoTest;
                }
            },
            { immediate: true, deep: true }
        );
        const init = () => {
            // 有提测信息
            if (props.detail.testPlanStartTime && props.detail.testPlanEndTime) {
                state.form.testStartTime = props.detail.testPlanStartTime;
                state.form.testEndTime = props.detail.testPlanEndTime;
            }
        };
        init();
        return {
            ruleFormRef,
            ...toRefs(state),
            rules,
            isPM,
            testStatus,
            rangeDateChange,
            showDetail,
            downTemplate,
            handleRefresh
        };
    }
});
</script>

<style scoped lang="less">
@import '../../RelateProcess/CheckProcess/styles/index.less';
</style>